<template>
  <el-drawer
    v-model="_visible"
    direction="rtl"
    :close-on-click-modal="false"
    :size="size"
    :class="customClass"
    @close="close"
  >
    <template #header>
      <span>{{ title }}</span>
    </template>
    <template #default>
      <div v-loading="loading" class="drawer-content">
        <div class="drawer-body">
          <slot></slot>
        </div>

        <div v-if="showFooter" class="drawer-footer">
          <div class="btn-operators">
            <el-button v-if="showCancel" type="primary" @click="cancel">取消</el-button>
            <el-button v-if="showReset" type="primary" @click="reset">重置</el-button>
            <el-button
              type="primary"
              :loading="saveLoading"
              :disabled="confirmDisabled"
              @click="onSubmit"
              >{{ saveLoading ? '' : '保存' }}</el-button
            >
          </div>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  customClass: {
    type: String,
    default: 'form-drawer',
  },
  size: {
    type: [String, Number],
    default: 1000,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  saveLoading: {
    type: Boolean,
    default: false,
  },
  showCancel: {
    type: Boolean,
    default: true,
  },
  showReset: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
  confirmDisabled: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['update:visible', 'close', 'cancel', 'reset', 'confirm'])

const _visible: any = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  },
})

const close = () => {
  emits('close')
}

const cancel = () => {
  emits('cancel')
}

const reset = () => {
  emits('reset')
}

const onSubmit = () => {
  emits('confirm')
}
</script>
